<template>
	<!-- 搜索组件 -->
	<view class="sear-box" style="width: 100%;box-sizing: border-box;">
		<view class="sear-con">
			<text @click="clickSear" class="iconfont icon-sousuo iconsou"></text>
			<input @confirm="clickSear" v-model="searText" class="input-ser" @blur="blueItem" @focus="showText = true"  type="text" value="" placeholder="搜索" />
		</view>
		<view @click="clickSear">
			<text class="ensure-text" v-if="showText">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				showText:false,
				searText:'',
				
			}
		},
		
		methods:{
			blueItem(){
				setTimeout(()=>{
					this.showText = false
				},1000)
			},
			clickSear(){
				//console.log(this.searText)
				this.$emit('clickSear',this.searText)
			}
		}
	}
</script>

<style scoped lang="scss">
	.sear-box{
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;
		border-top: 1rpx solid #EEEEEE;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.sear-con{
		// flex: 1;
		width: 600rpx;
		height: 56rpx;
		background: #F0F0F0;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
	}
	.iconsou{
		font-size: 35rpx;
		padding: 0 30rpx;
		line-height: 65rpx;
	}
	.input-ser{
		flex: 1;
		padding-right: 40rpx;
		font-size: 30rpx;
	}
	.ensure-text{
		font-size: 30rpx;
		color: #0080ff;
		margin-left: 30rpx;
	}
</style>
